<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" />
    </head>
    <body>
        <div class="container">
            <div id="qps" style="height: 230px;margin-top: 80px;margin-bottom: 110px;"></div>
            <div id="rtt" style="height: 230px;margin-bottom: 0px;"></div>
        </div>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdn.bootcss.com/highcharts/6.0.7/highcharts.js"></script>
        <script type="text/javascript">
Highcharts.setOptions({ global: { useUTC: false } });
option = {
    chart: { type: 'spline', animation: Highcharts.svg, marginRight: 10, },
    credits: { enabled: false },
    title: { text: '' },
    xAxis: { type: 'datetime', tickPixelInterval: 150 },
    yAxis: { title: { text: 'QPS' }, labels: { format: '{value}' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] },
    tooltip: { enabled: false },
    legend: { enabled: false },
    exporting: { enabled: false },
}
optionSeries = {
    name: '', states: { hover: { enabled: false } },
    data: (function() {
        // generate an array of random data
        var data = [], time = (new Date()).getTime(), i;
        for (i = -30; i <= 0; i += 1) {
            data.push({
                x: time + i * 1000,
                y: 0
            });
        }
        return data;
    }())
}

$('#qps').highcharts({}, function(c) {
    c.addSeries(optionSeries, true)
    option.yAxis.title.text='QPS'
    c.update(option)
});

$('#rtt').highcharts({}, function(c) {
    c.addSeries(optionSeries, true)
    option.yAxis.labels.format='{value} ms'
    option.yAxis.title.text='RTT'
    c.update(option)
});

websocket = new WebSocket("ws://"+document.location.host+"/debug");
websocket.onmessage = function(evt) {
    var x = (new Date()).getTime()
    var obj = $.parseJSON(evt.data)
    $('#qps').highcharts().series[0].addPoint([x, obj.qps], true, true);
    $('#rtt').highcharts().series[0].addPoint([x, obj.rtt], true, true);
}
        </script>
    </body>
</html>
